import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const filesStyle = style({
	display: 'flex',
	userSelect: 'none',
	selectors: {
		'&[type=icon]': {
			flexDirection: 'row',
			alignItems: 'center',
			flexWrap: 'wrap',
		},
		'&[type=list]': {
			flexDirection: 'column',
			alignItems: 'stretch',
		},
	},
});


globalStyle(`${filesStyle}>div.dropping:after`, {
	content: ' ',
	position: 'absolute',
	display: 'block',
	left: 0,
	top: 0,
	right: 0,
	height: '100%',
	backgroundColor: vars.color.brand,
	opacity: 0.5,
});

globalStyle(`${filesStyle}[type=icon]>div`, {
	display: 'flex',
	position: 'relative',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'center',
	width: '6em',
	height: '6em',
	margin: '0.5em',
	border: `2px solid ${vars.color.border}`,
	overflow: 'hidden',
});

globalStyle(`${filesStyle}[type=icon]>div>div.icon`, {
	position: 'relative',
	top: '-0.5em',
	alignSelf: 'center',
	width: '3em',
	height: '3em',
});

globalStyle(`${filesStyle}[type=icon]>div>img`, {
	objectFit: 'cover',
	flex: 1,
});

globalStyle(`${filesStyle}[type=icon]>div>div.name`, {
	position: 'absolute',
	left: 0,
	bottom: 0,
	right: 0,
	height: '1.5em',
	lineHeight: '1.5em',
	textAlign: 'center',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	whiteSpace: 'nowrap',
	backgroundColor: 'black',
	color: 'white',
	fontSize: '0.8em',
	padding: '0 2px',
});

globalStyle(`${filesStyle}[type=icon]>div>div.del`, {
	position: 'absolute',
	left: '0',
	right: '0',
	bottom: '-2em',
	height: '2em',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	transition: 'bottom 200ms',
	backgroundColor: vars.color.danger,
	fill: 'white',
});

globalStyle(`${filesStyle}[type=icon]>div:hover>div.del`, {
	bottom: '0',
});

globalStyle(`${filesStyle}>div.draging`, {
	opacity: 0.3,
});

globalStyle(`${filesStyle}[type=icon]>div.draging:hover>div.del`, {
	bottom: '-2em',
});

globalStyle(`${filesStyle}[type=icon]>div.add`, {
	alignItems: 'center',
	justifyContent: 'center',
	border: `2px dotted ${vars.color.darkBorder}`,
	cursor: 'pointer',
});

globalStyle(`${filesStyle}[type=list]>div`, {
	display: 'flex',
});
